import React, { Component } from 'react';
import '../font/iconfont.css'
import '../styles/MyTabber.css'

import icon from '../assets/2.png'
class MyTabber extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [
                { icon, text: '店铺' },
                { icon, text: '分类' },
                { icon, text: '全部商品' },
                { icon, text: '购物车' },
                { icon, text: '个人中心' },
            ],
            currentIndex: 0
        }
    }

    changeStyle(index,e) {
        this.setState({
            currentIndex:index
        },()=>{
        //    console.log(this.state.currentIndex);
        })
    }

    render() {
        return (
            <div className='tabber'>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className={`item ${this.state.currentIndex==index?'active':''}`} onClick={(e) => { this.changeStyle(index) }} key={index} >
                                <img src={item.icon} alt="" />
                                <span>{item.text}</span>
                            </div>
                        )
                    })
                }
                {
                    //如果 this.state.list.length=0就渲染空div
                    this.state.list.length == 0 && <div></div>
                }
            </div>
        );
    }
}

export default MyTabber;